<template>
  <div style="heigth: 100%;">
    <div class="btbox btboxbg flexb fontz">
      {{$t('jy.keyData')}}
    </div>
    <div class="priceNum fontz">
      <div class="nowTotalEos">
        <p>
          {{$t('rex.rexEosPool')}}
          <el-popover
            placement="bottom"
            trigger="hover"
            :content="$t('rex.eosBuyRexRent')">
            <span slot="reference" class="iconfont icon-huaban iconBt"></span>
          </el-popover>
        </p>
        <div class="fontdd flex" :class="Number(allEosChange) < 0 ? 'redColor' : 'greenColor'">
          <span>{{allEos}} EOS</span><i class="iconfont fontz" :class="Number(allEosChange) < 0 ? 'icon-xia' : 'icon-shang'"></i>
        </div>
        <div class="redColor" v-if="Number(allEosChange) < 0">
          {{allEosChange}} EOS
        </div>
        <div class="greenColor" v-else>
          + {{allEosChange}} EOS
        </div>
      </div>
      <div class="nowRemainRam">
        <p>{{ $t('rex.rexCirculation') }}</p>
        <div class="fontdd flex" :class="Number(allRexChange) < 0 ? 'redColor' : 'greenColor'">
          <span>{{allRex}} REX</span><i class="iconfont fontz" :class="Number(allRexChange) < 0 ? 'icon-xia' : 'icon-shang'"></i>
        </div>
        <div class="redColor" v-if="Number(allRexChange) < 0">
          {{allRexChange}} REX
        </div>
        <div class="greenColor" v-else>
          + {{allRexChange}} REX
        </div>
      </div>
      <div class="ramFormula fontz">
        <el-popover
          placement="bottom-start"
          trigger="click"
          :width="350">
          <!-- <div class="formula" :style="$store.state.app.language === 'en' ? 'padding: 0;' : 'padding: 10px;'"> -->
          <div class="formula">
            <div class="flex formulaContent">
              <span class="ramPrice" :style="$store.state.app.language === 'en' ? 'flex: 2.5;-ms-flex: 2.5;-webkit-box-flex: 2.5;' : ''">
                {{ $t('rex.rexPrice') }}
              </span>
              <span class="ramSign"
                :style="$store.state.app.language === 'en' ? 'flex: 0.6;-ms-flex: 0.6;-webkit-box-flex: 0.6;' : ''">
                ≈
              </span>
              <div class="flex">
                <span :style="$store.state.app.language === 'en' ? 'margin-left: 20px;' : 'margin-left: 10px;'">{{ $t('rex.rexEosPool') }}</span>
                <span :style="
                $store.state.app.language === 'en' ?'margin-left: 55px;' :
                $store.state.app.language === 'ko' ?'margin-left: 48px;' :
                'margin-left: 30px;'">
                  {{ $t('rex.rexCirculation') }}
                  </span>
                <em :style="$store.state.app.language === 'en' ? 'width: 220px;' : 'width: 185px;'"></em>
              </div>
            </div>
          </div>
          <div class="formulaTip" slot="reference">
            {{$t('rex.rexPriceFormula')}} <span slot="reference" class="iconfont icon-huaban"></span>
          </div>
        </el-popover>
      </div>
    </div>
  </div>

</template>

<script>
// import Io from '@/utils/socket';
// import { EosModel } from '@/utils/eos/index';

export default {
  name: 'ram-right-top',
  data() {
    return {
      allRex: '0.0000', // 全网REX流通量
      allRexChange: '0.0000',
      allEos: '0.0000', // REX专属的EOS池子总量
      allEosChange: '0.0000',
    }
  },
  components: {
  },
  props: {
    rexTableRows: Object
  },
  watch: {
    'rexTableRows.timer': function change() {
      this.handleGetTableRow();
    }
  },
  created() {
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    handleGetTableRow() {
      const row = this.rexTableRows;
      const totalLendable = parseFloat(row.total_lendable, 0); // REX专属的EOS池子总量
      const totalRex = parseFloat(row.total_rex, 0); // 全网REX流通量
      const allRexStorage = Number(sessionStorage.getItem('allRexStorage'));
      const allEosStorage = Number(sessionStorage.getItem('allEosStorage'));
      if (allRexStorage && totalRex) {
        this.allRexChange = (totalRex - allRexStorage).toFixed(4);
      }
      if (allEosStorage && totalLendable) {
        this.allEosChange = (totalLendable - allEosStorage).toFixed(4);
      }
      this.allRex = totalRex.toFixed(4);
      this.allEos = totalLendable.toFixed(4);
      sessionStorage.setItem('allRexStorage', totalRex);
      sessionStorage.setItem('allEosStorage', totalLendable);
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";

.btbox {
  height: 42px;
  padding: 0 11px;
}

.btboxbg {
  background: $-topcolorf7;
}

.theme-1B1D27 {
  .btboxbg {
    background: rgba(0, 0, 0, 0.2);
    color: $-main-color;
  }
}

.ramFormula {
  margin-top: 8px;

  .formulaTip {
    display: inline;
    padding-left: 15px;
    &:hover {
      color: #278EDA;
      cursor: pointer;
    }
    span {
      display: inline-block;
      vertical-align: middle;
      margin-top: -1px;
    }
  }
}

.formula {
  padding: 10px;
  font-size: 14px;
  p {
    text-align: left;
    line-height: 24px;
    margin-bottom: 8px;
  }
  .formulaContent {
    height: 50px;
    .ramPrice {
      flex: 2.9;
      text-align: center;
    }
    .ramSign {
      flex: 1;
    }
    div {
      position: relative;
      height: 46px;
      flex: 8;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      padding-left: 7px;
      span:first-child {
        margin-left: 10px;
      }
      em {
        position: absolute;
        top: 50%;
        left: 0;
        display: block;
        width: 145px;
        height: 1px;
        background: #666;
      }
    }
  }
}

.priceNum {
  padding: 8px 0;

  .nowTotalEos, .nowRemainRam {
    padding-left: 15px;

    .iconBt {
      display: inline-block;
      vertical-align: middle;
      margin-top: -1px;
    }
  }

  .fontdd {
    padding: 4px 0 0;
  }

  .nowRemainRam {
    margin-top: 8px;
  }
  .greenColor {
    color: #67C269;
  }
  .redColor {
    color: #EE1443;
  }
}
</style>

